<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page language="java" import="java.io.BufferedReader" %>
<%@ page language="java" import="java.io.FileReader" %>
<%@ page language="java" %>
<%@ page import="java.text.*" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    String webSocketPath = request.getServerName() + ":" + request.getServerPort() + path;
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>WebGL模型页面</title>

    <link rel="stylesheet" type="text/css" href="mintor/compensatormanage/js/webuploader.css"/>

    <script type="text/javascript" src="jquery/jquery-easyui-1.4.3/jquery.min.js"></script>
    <%--<script type="text/javascript" src="jquery/jquery.form.js"></script>--%>

    <script type="text/javascript" src="mintor/model/threeJs/dat.gui.min.js"></script>
    <script type="text/javascript" src="mintor/model/threeJs/three.js"></script>
    <script type="text/javascript" src="mintor/model/threeJs/Detector.js"></script>
    <script type="text/javascript" src="mintor/model/threeJs/OrbitControls.js"></script>
    <script type="text/javascript" src="mintor/model/threeJs/VRMLLoader.js"></script>
    <script type="text/javascript" src="mintor/model/threeJs/stats.min.js"></script>
    <script type="text/javascript" src="mintor/model/threeJs/Tween.js"></script>
    <script type="text/javascript" src="mintor/model/threeJs/RequestAnimationFrame.js"></script>


    <script type="text/javascript" src="mintor/compensatormanage/js/webuploader.js"></script>

    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #AAAAFF;
        }

        .lbl {
            color: #fff;
            font-size: 15px;
            font-weight: bold;
            position: absolute;
            z-index: 100;
            text-shadow: #000 1px 1px 1px;
            background-color: rgba(0, 0, 0, 0.85);
            padding: 1em
        }

        #lbl_tip {
            text-align: left;
        }

        .g {
            color: #aaa
        }

        .c {
            color: orange
        }

        img {
            z-index: -1;
            position: relative;
            height: 80px;
            width: 80px;
            /*height:15%;*/
        }

        .drawing-container {
            width: 626px;
            height: 300px;
        }

        .imgfangda {
            position: absolute;
            z-index: 100;
            background-color: rgba(0, 0, 0, 0);
            /*padding: 1em*/
        }
        .textarea {
            color: orange; /* 设置文本颜色为橙色 */
            font-weight: bold;
            overflow-y: scroll;
            background-color: #151821; /* 设置背景颜色为黑色 */
            border: 1px solid #151821;
            font-size:15px;
            width: 217px;
            height: 80px;
        }
    </style>
</head>


<body>

<script type="text/javascript">
    $(function () {
        // 变色特效
        var backgroundElement = window.top.cfgetTopBackgroundElement();
        $(backgroundElement).css("background", "rgba(235,245,235,0.50)");

//按钮放大效果
        $("div.img1 :input").not(".lbl1").hover(function (e) {
//        $(":input").hover(function (e) {
            var $addd = $(this).attr("src");
            document.getElementById("imgfangda").style.left = e.clientX -86 + "px";
            document.getElementById("imgfangda").style.top = e.clientY + "px";
            $(".imgfangda").attr('src', $addd).show().css("opacity", "1");
        }, function () {
            $(".imgfangda").hide();
        });
    });
</script>

<script type="text/javascript">
    <%--在光标处插入字符--%>

    function insertCode(obj, str) {
        // if (document.selection) {
        //     var sel = document.selection.createRange();
        //     sel.text = str;
        // }
        // else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
        //     var startPos = obj.selectionStart,
        //         endPos = obj.selectionEnd,
        //         cursorPos = startPos,
        //         tmpStr = obj.innerHTML;
        //     obj.innerHTML = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
        //     cursorPos += str.toString().length;
        //     obj.selectionStart = obj.selectionEnd = cursorPos;
        // }
        // else {
        obj.value+= str;
        // }
    }

    <%--读取按键的值--%>

    function read(str) {
        var oCode = document.getElementById("code");
        if ($("#press_input_off").attr("src") == 'mintor/model/png/press_input_on.png') {
            insertCode(oCode, str);
        }
    }
</script>

<script type="text/javascript">
    // //实现clear键的功能
    // function clearText() {
    //     $("#BottomImg").css("display", "block");
    //     $("#canvas").css("display", "none");
    //     picControl = 0;
    //     // var xx=document.getElementById("code");
    //     document.getElementById("code").innerHTML = "";
    //     document.getElementById("code").value = "";
    //     //清空画布
    //     document.getElementById("xpos1").innerHTML = "";
    //     document.getElementById("ypos1").innerHTML = "";
    //     document.getElementById("zpos1").innerHTML = "";
    //     var c = document.getElementById("canvas");
    //     var ctx = c.getContext("2d");
    //     ctx.clearRect(0, 0, 622, 300);
    //     // scene.remove(geometry);
    // }

    //实现delete键的功能
    function deleteCode() {
        var obj = document.getElementById("code");
//         if (document.selection) {//IE
//             var sel = document.selection.createRange();
// //            sel.moveStart("character",-1);??
// //            sel.select();??
// //            document.selection.clear();??
//         }
//         else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {//非IE
//             var startPos = obj.selectionStart,
//                 endPos = obj.selectionEnd,
//                 cursorPos = startPos,
//                 tmpStr = obj.innerHTML;
//             obj.innerHTML = tmpStr.substring(0, startPos - 1) + tmpStr.substring(endPos, tmpStr.length);
//             cursorPos += -1;
//             obj.selectionStart = obj.selectionEnd = cursorPos;
//         }
//         else {
        obj.value = obj.value.substr(0, obj.value.length - 1);
        // }
    }

    //获取光标当前位置
    function getCursorPosition() {
        var oCode = document.getElementById("code");
        var cursurPosition = -1;
        if (oCode.selectionStart >= 0) {//非IE浏览器
            cursurPosition = oCode.selectionStart;
        } else {//IE
            var range = document.selection.createRange();
            range.moveStart("character", -oCode.innerHTML.length);
            cursurPosition = range.textarea.length;//
        }
        return cursurPosition;
    }

    //实现up键的功能
    function moveUp() {
        var oCode = document.getElementById("code");
//        var cols=oCode.cols;
        if (oCode.selectionStart >= 0) {//非IE浏览器
            oCode.selectionEnd = oCode.selectionStart = getCursorPosition() - 25;//chrome,非firefox

//            Chrome: 8px * cols + 17px
//            IE: 8px * cols + 17px
//            FireFox: 8px * cols + 29px

        } else {//IE
            var range = oCode.createTextRange();
            range.move("character", getCursorPosition() - 25);
            range.select();
        }
    }

    //实现down键的功能
    function moveDown() {
        var oCode = document.getElementById("code");
//        var cols=oCode.cols;
        if (oCode.selectionStart >= 0) {//非IE浏览器
            oCode.selectionEnd = oCode.selectionStart = getCursorPosition() + 25;//chrome,非firefox
        } else {//IE
            var range = oCode.createTextRange();
            range.move("character", getCursorPosition() + 25);
            range.select();
        }
    }

    //实现right键的功能
    function moveRight() {
        var oCode = document.getElementById("code");
        if (oCode.selectionStart >= 0) {//非IE浏览器
            oCode.selectionEnd = oCode.selectionStart = getCursorPosition() + 1;
        } else {//IE
            var range = oCode.createTextRange();
            range.move("character", getCursorPosition() + 1);
            range.select();
        }
    }

    //实现left键的功能
    function moveLeft() {
        var oCode = document.getElementById("code");
        var pos = getCursorPosition() - 1;
        if (oCode.selectionStart >= 0) {//非IE浏览器
            oCode.selectionEnd = oCode.selectionStart = getCursorPosition() - 1;
        } else {//IE
            var range = oCode.createTextRange();
            range.move("character", getCursorPosition() - 1);
            range.select();
        }
    }
</script>

<%--机床页面左上角的内容--%>
<%--<div id = "left" style="background:blue;width:626px;height: 100%;float: left;margin-top: 60px;">--%>
<div id="lbl_tip" class="lbl" style="display: none;">
    <p2 id="sensorNum"><span class="c">传感器编号: 001-SDT00-04</span><br/></p2>
    <p2 id="sensorValue">数值: <span class="c">28.5度</span><br/></p2>
</div>

<%--画轨迹的位置--%>
<div class="drawing-container" style="position: absolute;width:600px;right: 2px; top: 326px;display:block;">
    <canvas id="canvas" style="border-bottom-left-radius: 2%;border-bottom-right-radius: 2%"></canvas>
</div>

<%--轨迹旁的左边显示--%>
<%--<div id="dateStr" class="word_grey"--%>
<%--style="width:200px;position: absolute;right: 20px; top: 400px;display:block;font-size:20px;display: none">--%>
<%--<p2 id="xpos1" class="c"> x轴坐标：<span class="c">0.00</span><br/></p2>--%>
<%--<p2 id="ypos1" class="c"> y轴坐标：<span class="c">0.00</span><br/></p2>--%>
<%--<p2 id="zpos1" class="c"> z轴坐标：<span class="c">0.00</span><br/></p2>--%>
<%--</div>--%>


<div id="info_tip" class="lbl info_tip" style="right:5px;top: 60px;display: block;
        box-sizing:border-box;
        -moz-box-sizing:border-box; /* Firefox */
        -webkit-box-sizing:border-box; /* Safari */
        /*width: 470px; height:475px;*/
        width:280px; height:353px;
        background-size: 100% 100%;
        background-image: url('<%=basePath%>/mintor/model/png/board3.png');
        border-radius: 2%;">
    <div id="board_context" >
        <%--面板的默认显示，可切换，以及txt的显示--%>
        <div  style="position: absolute;left: 30px; top: 110px;display:block;font-size:15px">
            <textarea name="code" id="code" rows="10" cols="29" class="textarea"></textarea>
        </div>
        <div style="position: absolute;left: 30px; top: 30px;display:block;font-size:15px ">
            <textarea class="textarea" id="showpos">x轴坐标：0.00&#10y轴坐标：0.00&#10z轴坐标：0.00&#10主轴转速：0.00</textarea>
            <%--<p2 id="xpos"><span class="c"> x轴坐标：0.00</span><br/></p2>--%>
            <%--<p2 id="ypos"><span class="c"> y轴坐标：0.00</span><br/></p2>--%>
            <%--<p2 id="zpos"><span class="c"> z轴坐标：0.00</span><br/></p2>--%>
        </div>
        <div id="pwr" style="position: absolute;left: 30px; top: 30px;display:none;font-size: 15px">
            <textarea class="textarea" id="showpower">x轴功率：0.00&#10y轴功率：0.00&#10z轴功率：0.00&#10主轴转速：0.00</textarea>
            <%--<p2 id="xpwr"><span class="c"> x轴功率 ：0.00000000</span><br/></p2>--%>
            <%--<p2 id="ypwr"><span class="c"> y轴功率 ：0.00000000</span><br/></p2>--%>
            <%--<p2 id="zpwr"><span class="c"> z轴功率 ：0.00000000</span><br/></p2>--%>
        </div>
        <div id="fuhe" style="position: absolute;left: 30px; top: 30px;display:none;font-size: 15px">
            <textarea class="textarea"id="showload">x轴负荷：0.00&#10y轴负荷：0.00&#10z轴负荷：0.00&#10主轴转速：0.00</textarea>
            <%--<p2 id="xfu"><span class="c"> x轴负荷 ：0.00000000</span><br/></p2>--%>
            <%--<p2 id="yfu"><span class="c"> y轴负荷 ：0.00000000</span><br/></p2>--%>
            <%--<p2 id="zfu"><span class="c"> z轴负荷 ：0.00000000</span><br/></p2>--%>
        </div>
        <%--<p2 id="maspd" style="position: absolute;left: 30px; top: 85px;font-size: 15px">--%>
        <%--<textarea class="textarea">主轴转速：0.00</textarea>--%>
        <%--&lt;%&ndash;<span class="c"> 主轴转速：1000</span><br/>&ndash;%&gt;--%>
        <%--</p2>--%>
        <input id="left_t" type="image" src='mintor/model/png/left_t.png'
               style="position: absolute; top: 202px; left: 90px; width: 20px;">
        <input id="right_t" type="image" src='mintor/model/png/right_t.png'
               style="position: absolute; top: 202px; left: 190px; width: 20px;">
    </div>

    <%--面板的按钮--%>
    <div id="UpBtn" class="img1">
        <%--<input id="press_o" type="image" onclick="read('O')" src='mintor/model/png/press_o.png'--%>
        <%--style="position: absolute; top: 18px; left: 289px; width: 27px;">--%>
        <%--<input id="press_n" type="image" onclick="read('N')" src='mintor/model/png/press_n.png'--%>
        <%--style="position: absolute; top: 18px; left: 316px; width: 27px;">--%>
        <input id="press_g" type="image" onclick="read('G')" src='mintor/model/png/press_g.png'
               style="position: absolute; top: 240px; left: 37px; width: 29px;">
        <input id="press_x" type="image" onclick="read('X')" src='mintor/model/png/press_x.png'
               style="position: absolute; top: 240px; left: 67px; width: 29px;">
        <input id="press_y" type="image" onclick="read('Y')" src='mintor/model/png/press_y.png'
               style="position: absolute; top: 240px; left: 97px; width: 29px;">
        <input id="press_z" type="image" onclick="read('Z')" src='mintor/model/png/press_z.png'
               style="position: absolute; top: 240px; left:127px; width: 29px;">
        <input id="press_7" type="image" onclick="read(7)" src='mintor/model/png/press_7.png'
               style="position: absolute; top: 240px; left: 157px; width: 29px;">
        <input id="press_8" type="image" onclick="read(8)" src='mintor/model/png/press_8.png'
               style="position: absolute; top: 240px; left: 187px; width: 29px;">
        <input id="press_9" type="image" onclick="read(9)" src='mintor/model/png/press_9.png'
               style="position: absolute; top: 240px; left: 217px; width: 29px;">

        <input id="press_0" type="image" onclick="read(0)" src='mintor/model/png/press_0.png'
               style="position: absolute; top: 270px; left: 37px; width: 29px;">
        <input id="press_1" type="image" onclick="read(1)" src='mintor/model/png/press_1.png'
               style="position: absolute; top: 270px; left: 67px; width:29px;">
        <input id="press_2" type="image" onclick="read(2)" src='mintor/model/png/press_2.png'
               style="position: absolute; top: 270px; left: 97px; width: 29px;">
        <input id="press_3" type="image" onclick="read(3)" src='mintor/model/png/press_3.png'
               style="position: absolute; top: 270px; left: 127px; width: 29px;">
        <input id="press_4" type="image" onclick="read(4)" src='mintor/model/png/press_4.png'
               style="position: absolute; top:270px; left:157px;width: 29px;">
        <input id="press_5" type="image" onclick="read(5)" src='mintor/model/png/press_5.png'
               style="position: absolute; top: 270px;  left: 187px; width: 29px;">
        <input id="press_6" type="image" onclick="read(6)" src='mintor/model/png/press_6.png'
               style="position: absolute; top:270px; left: 217px; width: 29px;">

        <%--<input id="press_m" type="image" onclick="read('M')" src='mintor/model/png/press_m.png'--%>
        <%--style="position: absolute; top: 70px; left: 289px; width: 27px;">--%>
        <%--<input id="press_s" type="image" onclick="read('S')" src='mintor/model/png/press_s.png'--%>
        <%--style="position: absolute; top: 70px; left: 316px; width: 27px;">--%>
        <%--<input id="press_t" type="image" onclick="read('T')" src='mintor/model/png/press_t.png'--%>
        <%--style="position: absolute; top: 70px; left: 343px; width: 27px;">--%>


        <%--<input id="press_f" type="image" onclick="read('F')" src='mintor/model/png/press_f.png'--%>
        <%--style="position: absolute; top: 96px; left: 289px; width: 27px;">--%>
        <%--<input id="press_h" type="image" onclick="read('H')" src='mintor/model/png/press_h.png'--%>
        <%--style="position: absolute; top: 96px; left: 316px; width: 27px;">--%>
        <%--<input id="press_eob" type="image" src='mintor/model/png/press_eob.png'--%>
        <%--style="position: absolute; top: 96px; left: 343px; width: 27px;">--%>
        <%--<input id="press_minus" type="image" src='mintor/model/png/press_minus.png'--%>
        <%--style="position: absolute; top: 96px; left: 370px; width: 27px;">--%>



        <%--<input id="press_pos" type="image" src='mintor/model/png/press_pos.png'--%>
        <%--style="position: absolute; top: 122px; left: 289px; width: 27px;">--%>
        <%--<input id="press_prog" type="image" src='mintor/model/png/press_prog.png'--%>
        <%--style="position: absolute; top: 122px; left: 316px; width: 27px;">--%>
        <%--<input id="press_offset" type="image" src='mintor/model/png/press_offset.png'--%>
        <%--style="position: absolute; top: 122px; left: 343px; width: 27px;">--%>
        <%--<input id="press_shift" type="image" src='mintor/model/png/press_shift.png'--%>
        <%--style="position: absolute; top: 122px; left: 370px; width: 27px;">--%>
        <%--<input id="press_can" type="image" src='mintor/model/png/press_can.png'--%>
        <%--style="position: absolute; top: 122px; left: 397px; width: 27px;">--%>


        <%--<input id="press_system" type="image" src='mintor/model/png/press_system.png'--%>
        <%--style="position: absolute; top: 148px; left: 289px; width: 27px;">--%>
        <%--<input id="press_message" type="image" src='mintor/model/png/press_message.png'--%>
        <%--style="position: absolute; top: 148px; left: 316px; width: 27px;">--%>
        <%--<input id="press_custom" type="image" src='mintor/model/png/press_custom.png'--%>
        <%--style="position: absolute; top: 148px; left: 343px; width: 27px;">--%>
        <%--<input id="press_alter" type="image" src='mintor/model/png/press_alter.png'--%>
        <%--style="position: absolute; top: 148px; left: 370px; width: 27px;">--%>
        <%--<input id="press_insert" type="image" src='mintor/model/png/press_insert.png'--%>
        <%--style="position: absolute; top: 148px; left: 397px; width: 27px;">--%>


        <%--<input id="press_pageup" type="image" src='mintor/model/png/press_pageup.png'--%>
        <%--style="position: absolute; top: 174px; left: 289px; width: 27px;">--%>
        <%--<input id="press_up" type="image" onclick="moveUp()" src='mintor/model/png/press_up.png'--%>
        <%--style="position: absolute; top: 174px; left: 343px; width: 27px;">--%>

        <%--<input id="press_help" type="image" src='mintor/model/png/press_help.png'--%>
        <%--style="position: absolute; top: 174px; left: 423px; width: 27px;">--%>

        <%--<input id="press_pagedown" type="image" src='mintor/model/png/press_pagedown.png'--%>
        <%--style="position: absolute; top: 200px; left: 289px; width: 27px;">--%>
        <%--<input id="press_left" type="image" onclick="moveLeft()" src='mintor/model/png/press_left.png'--%>
        <%--style="position: absolute; top: 200px; left: 316px; width: 27px;">--%>
        <%--<input id="press_down" type="image" onclick="moveDown()" src='mintor/model/png/press_down.png'--%>
        <%--style="position: absolute; top: 200px; left: 343px; width: 27px;">--%>
        <%--<input id="press_right" type="image" onclick="moveRight()" src='mintor/model/png/press_right.png'--%>
        <%--style="position: absolute; top: 200px; left: 370px; width: 27px;">--%>

        <%--<input id="press_reset" type="image" src='mintor/model/png/press_reset.png'--%>
        <%--style="position: absolute; top: 200px; left: 423px; width: 27px;">--%>


        <form id="form1" action="" method="post" enctype="multipart/form-data">
            <input id="picker" name="file" type="file"
                   style="display:none;" onchange="onFileSelected(event)">
            <input type="button" value="sendFile" id="sendFile"
                   style="display:none;" onclick="submitFile();"/>
        </form>

        <input id="pickerbtn" type="image" src='mintor/model/png/choose_file.png'
               style="position: absolute; top:300px; left: 37px; width: 29px;">
        <%--<input id="send_file" type="image" src='mintor/model/png/send_file.png'--%>
        <%--style="position: absolute; top:300px; left: 67px; width: 29px;">--%>
        <input id="start" type="image" src='mintor/model/png/start.png'
               style="position: absolute; top: 300px; left: 67px; width: 29px;">
        <input id="stop" type="image" src='mintor/model/png/stop.png'
               style="position: absolute; top: 300px; left:97px; width: 29px;">
        <input id="press_clear" type="image" onclick="clearText()" src='mintor/model/png/press_clear.png'
               style="position: absolute; top: 300px; left: 127px; width: 29px;">
        <%--<input id="press_point" type="image" onclick="read('.')" src='mintor/model/png/press_point.png'--%>
        <%--style="position: absolute; top: 96px; left: 423px; width: 27px;">--%>
        <input id="press_emptyspace" type="image" onclick="read(' ')"
               src='mintor/model/png/press_emptyspace.png'
               style="position: absolute; top: 300px; left: 157px;width: 29px;">
        <input id="press_delete" type="image" onclick="deleteCode()" src='mintor/model/png/press_delete.png'
               style="position: absolute; top: 300px; left:187px; width: 29px;">
        <input id="press_input_off" type="image" src='mintor/model/png/press_input_off.png'
               style="position: absolute; top: 300px; left: 217px; width: 29px;">
        <%--<input id="stop" type="image" src='mintor/model/png/stop.png'--%>
        <%--style="position: absolute; top: 300px; left: 67px; width: 29px;">--%>
        <%--<input id="press_SwitchToSmall" type="image" onclick="SwitchToSmall()"--%>
        <%--src='mintor/model/png/press_switch.png'--%>
        <%--style="position: absolute; top: 226px; left: 397px;width: 27px;">--%>
    </div>
    <%--下部面板的按钮--%>
    <%--<div id="BottomBtn">--%>
    <%--<input id="mode_sel" type="image" src='mintor/model/png/left_sel.png'--%>
    <%--style="position: absolute; top: 303px; left: 33px; width: 48px;">--%>
    <%--<input id="axis_sel" type="image" src='mintor/model/png/left_sel.png'--%>
    <%--style="position: absolute; top: 303px; left: 147px; width: 48px;">--%>
    <%--<input id="rate_sel" type="image" src='mintor/model/png/left_sel.png'--%>
    <%--style="position: absolute; top: 303px; left: 258px; width: 48px;">--%>
    <%--<input id="pause_sel" type="image" src='mintor/model/png/pause_off.png'--%>
    <%--style="position: absolute; top: 290px; left: 360px; width: 70px;">--%>
    <%--<input id="cycle_on" type="image" src='mintor/model/png/green_off.png'--%>
    <%--style="position: absolute; top: 380px; left: 35px; width: 48px;">--%>
    <%--<input id="cycle_off" type="image" src='mintor/model/png/red_off.png'--%>
    <%--style="position: absolute; top: 435px; left: 35px; width: 48px;">--%>


    <%--<input id="press_singlerun_off" type="image" src='mintor/model/png/press_singlerun_off.png'--%>
    <%--style="position: absolute; top: 380px; left: 135px; width: 40px;">--%>
    <%--<input id="press_norun_off" type="image" src='mintor/model/png/press_norun_off.png'--%>
    <%--style="position: absolute; top: 380px; left: 180px; width: 40px;">--%>
    <%--<input id="press_selectjump_off" type="image" src='mintor/model/png/press_selectjump_off.png'--%>
    <%--style="position: absolute; top: 380px; left: 225px; width: 40px;">--%>
    <%--<input id="press_selectstop_off" type="image" src='mintor/model/png/press_selectstop_off.png'--%>
    <%--style="position: absolute; top: 380px; left: 270px; width: 40px;">--%>

    <%--<input id="press_spindle_plus_off" type="image" src='mintor/model/png/press_spindle_plus_off.png'--%>
    <%--style="position: absolute; top: 380px; left: 320px; width: 40px;">--%>
    <%--<input id="press_spindle_stop_off" type="image" src='mintor/model/png/press_spindle_stop_off.png'--%>
    <%--style="position: absolute; top: 380px; left: 365px; width: 40px;">--%>
    <%--<input id="press_spindle_minus_off" type="image" src='mintor/model/png/press_spindle_minus_off.png'--%>
    <%--style="position: absolute; top:380px; left: 410px; width: 40px;">--%>

    <%--<input id="press_machinelock_off" type="image" src='mintor/model/png/press_machinelock_off.png'--%>
    <%--style="position: absolute; top: 425px; left: 135px; width: 40px;">--%>
    <%--<input id="press_zlock_off" type="image" src='mintor/model/png/press_zlock_off.png'--%>
    <%--style="position: absolute; top: 425px; left: 180px; width: 40px;">--%>
    <%--<input id="press_mstlock_off" type="image" src='mintor/model/png/press_mstlock_off.png'--%>
    <%--style="position: absolute; top: 425px; left: 225px; width: 40px;">--%>
    <%--<input id="press_insert_off" type="image" src='mintor/model/png/press_insert_off.png'--%>
    <%--style="position: absolute; top: 425px; left: 270px; width: 40px;">--%>

    <%--<input id="press_axis_plus_off" type="image" src='mintor/model/png/press_axis_plus_off.png'--%>
    <%--style="position: absolute; top: 425px; left: 320px; width: 40px;">--%>
    <%--<input id="press_axis_minus_off" type="image" src='mintor/model/png/press_axis_minus_off.png'--%>
    <%--style="position: absolute; top: 425px; left: 365px; width: 40px;">--%>
    <%--&lt;%&ndash;演示&ndash;%&gt;--%>
    <%--<input id="press_show_off" type="image" src='mintor/model/png/press_show_off.png'--%>
    <%--style="position: absolute; top:425px; left: 410px; width: 40px;">--%>
    <%--</div>--%>

    <%--<div id="control_tip" class="lbl" style="right:0; width:18%; text-align: center; display: none">--%>
    <%--<div id="control_display" style="text-align: center;">--%>
    <%--<div>模式：--%>
    <%--<input id="auto_btn" type="image" src='mintor/model/png/auto.png'--%>
    <%--style="width: 16%; vertical-align: middle;"/>--%>
    <%--<input id="hand_btn" type="image" src='mintor/model/png/hand.png'--%>
    <%--style="width: 16%; vertical-align: middle;"/>--%>
    <%--<input id="adj_btn" type="image" src='mintor/model/png/adjust.png'--%>
    <%--style="width: 16%; vertical-align: middle;"/>--%>
    <%--</div>--%>

    <%--<div><br>轴选：--%>
    <%--<input id="xaxis_btn" type="image" src='mintor/model/png/xaxis.png'--%>
    <%--style="width: 16%; vertical-align: middle;"/>--%>
    <%--<input id="yaxis_btn" type="image" src='mintor/model/png/yaxis.png'--%>
    <%--style="width: 16%; vertical-align: middle;"/>--%>
    <%--<input id="zaxis_btn" type="image" src='mintor/model/png/zaxis.png'--%>
    <%--style="width: 16%; vertical-align: middle;"/>--%>
    <%--</div>--%>

    <%--<div><br>倍选：--%>
    <%--<input id="x1_btn" type="image" src='mintor/model/png/x1.png'--%>
    <%--style="width: 16%; vertical-align: middle;"/>--%>
    <%--<input id="x10_btn" type="image" src='mintor/model/png/x10.png'--%>
    <%--style="width: 16%; vertical-align: middle;"/>--%>
    <%--<input id="x100_btn" type="image" src='mintor/model/png/x100.png'--%>
    <%--style="width: 16%; vertical-align: middle;"/>--%>
    <%--</div>--%>
    <%--<br>--%>
    <%--</div>--%>
    <%--&lt;%&ndash;<div id="ctr_hide_tip" style="text-align: center;font-size: small;">收起</div>&ndash;%&gt;--%>
    <%--</div>--%>
    <div id="ctr_hide_tip"
         style="cursor: pointer; position: absolute;left:10px;top: 330px;text-align: center;font-size: small;">收起
    </div>
</div>


<div id="ctr_show_tip" class="lbl"
     style="display:none;cursor: pointer; position: absolute;right: 0;top: 60px;text-align: center;font-size: small;">展开
</div>


<img class="imgfangda" id="imgfangda" src="" style="display: none;">

<div id="Stats-output"></div>
<div id="WebGL-output"></div>

<script type="text/javascript">
    //    function showwebgl() {
    if (!Detector.webgl) Detector.addGetWebGLMessage();
    var controls;                                           // 鼠标响应控制变量
    var picControl = 0;
    var container, scene, webGLRenderer, camera;
    var webglRenderWidth,webglRenderHeight;    //渲染器画布大小
    var maxis, columnaxis, xaxismotion, yaxismotion, zaxismotion, totalMd, sensor, raycaster, mouse;
    var maxiscolorpoint;//主轴上的所有方块
    var rightcolorpoint;//右侧上的所有方块

    var geom = new THREE.Geometry(), line, splineHelperObjects = [];   //定义线条全局变量


    var orimaxisposition, orix,oriy,oriz,currentx,currenty,currentz; //设置原始标记坐标


    var machineMotion;                              // 机床动作组
    var maxisGroup = undefined;                     // 主轴动作组
    var maxisBase = {x: 0, y: 1.25, z: 0};                 // 主轴基准坐标
    var maxisDeviation = {x: 0, y: 0, z: 0};               // 主轴初始化后偏移
    var axisBase = {x: 0, y: 0, z: 0};                // 三轴基准坐标
    var maxisOrigin = {x: 0, y: 0, z: 0};                  // 主轴原始坐标
    var runStatus = false, xdir = false, zdir = false, ydir = false;
    var maxiGroupRotateSpeed = 0;                    // 主轴旋转速度
    var mode_sel_v = 0, axis_sel_v = 0, rate_sel_v = 0;         // 模式选择，轴选择与倍率选择变量

    var socketPath = "<%=webSocketPath%>";
    var postionarr, xaxis, yaxis, zaxis, mspeed;
    var temdata = 0;
    var temdatas = "";
    var webSocket = new WebSocket('ws://' + socketPath + '/websocket/CFlower');
    var oCode = document.getElementById('code');

    webSocket.onerror = function (event) {			// socket错误响应事件
        onError(event);
    };
    webSocket.onopen = function (event) {			// socket开启响应事件
        onOpen(event);
    };
    webSocket.onmessage = function (event) {		// socket接收响应事件
        temdatas = event.data;
        // alert(temdatas);
        onMessage(event);
        console.log("temdatas="+event.data);
    };


    init();
    render();

    $(window).resize(function () {
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
    });
    // $('#select_file').click(function () {
    //     $('#selectFile').click();
    // });
    $('#send_file').click(function () {
        $('#sendFile').click();
    });

    function submitFile() {
        var file = $("#picker").val();//获取文件名
        var form = new FormData(document.getElementById("form1"));
        if (file == "") {
            alert("请选择要发送的文件！");
            return false;
        } else {
            $.ajax({
                url: "fileTransfer",
                type: "post",
                data: form,
                dataType: "json", //预期服务器返回的数据类型
                processData: false,
                contentType: false,//发送给服务器的格式"application/json"
                async: true,//默认true
                cache: false,
                success: function (data) {
                    alert(data.msg);
                },
                error: function (e) {
                    alert("文件传输失败！");
                }
            });
        }
    }

    $("#auto_btn").click(function () {
        $("#auto_btn").attr("src", 'mintor/model/png/auto_sel.png');
        $("#hand_btn").attr("src", 'mintor/model/png/hand.png');
        $("#adj_btn").attr("src", 'mintor/model/png/adjust.png');
    });
    $("#hand_btn").click(function () {
        $("#auto_btn").attr("src", 'mintor/model/png/auto.png');
        $("#hand_btn").attr("src", 'mintor/model/png/hand_sel.png');
        $("#adj_btn").attr("src", 'mintor/model/png/adjust.png');
    });
    $("#adj_btn").click(function () {
        $("#auto_btn").attr("src", 'mintor/model/png/auto.png');
        $("#hand_btn").attr("src", 'mintor/model/png/hand.png');
        $("#adj_btn").attr("src", 'mintor/model/png/adjust_sel.png');
    });
    $("#xaxis_btn").click(function () {
        $("#xaxis_btn").attr("src", 'mintor/model/png/xaxis_sel.png');
        $("#yaxis_btn").attr("src", 'mintor/model/png/yaxis.png');
        $("#zaxis_btn").attr("src", 'mintor/model/png/zaxis.png');
    });
    $("#yaxis_btn").click(function () {
        $("#xaxis_btn").attr("src", 'mintor/model/png/xaxis.png');
        $("#yaxis_btn").attr("src", 'mintor/model/png/yaxis_sel.png');
        $("#zaxis_btn").attr("src", 'mintor/model/png/zaxis.png');
    });
    $("#zaxis_btn").click(function () {
        $("#xaxis_btn").attr("src", 'mintor/model/png/xaxis.png');
        $("#yaxis_btn").attr("src", 'mintor/model/png/yaxis.png');
        $("#zaxis_btn").attr("src", 'mintor/model/png/zaxis_sel.png');
    });
    $("#x1_btn").click(function () {
        $("#x1_btn").attr("src", 'mintor/model/png/x1_sel.png');
        $("#x10_btn").attr("src", 'mintor/model/png/x10.png');
        $("#x100_btn").attr("src", 'mintor/model/png/x100.png');
    });
    $("#x10_btn").click(function () {
        $("#x1_btn").attr("src", 'mintor/model/png/x1.png');
        $("#x10_btn").attr("src", 'mintor/model/png/x10_sel.png');
        $("#x100_btn").attr("src", 'mintor/model/png/x100.png');
    });
    $("#x100_btn").click(function () {
        $("#x1_btn").attr("src", 'mintor/model/png/x1.png');
        $("#x10_btn").attr("src", 'mintor/model/png/x10.png');
        $("#x100_btn").attr("src", 'mintor/model/png/x100_sel.png');
    });
    $("#ctr_hide_tip").click(function () {
        $(".info_tip").hide();
        $("#ctr_show_tip").show();
        // webglRenderWidth=window.innerWidth;
        // render();
    });
    $("#ctr_show_tip").click(function () {
        $("#ctr_show_tip").hide();
        var display = $("#canvas").css('display');
        if (display == 'none') {
            $("#BottomImg").show();
        } else {
            $("#canvas").show();
        }
        $("#info_tip").show();
        // webglRenderWidth=window.innerWidth-$("#info_tip").width();
        // render();
    });

    $("#mode_sel").mousedown(function (event) {
        change_sel(event.which, "#mode_sel");
    });
    $("#axis_sel").mousedown(function (event) {
        change_sel(event.which, "#axis_sel");
    });
    $("#rate_sel").mousedown(function (event) {
        change_sel(event.which, "#rate_sel");
    });

    function change_sel(eventNum, idNum) {
        if ($(idNum).attr("src") == 'mintor/model/png/mid_sel.png') {
            $(idNum).attr("src", 'mintor/model/png/right_sel.png');
            switch (idNum) {
                case "#mode_sel":
                    mode_sel_v = 2;
                    break;
                case "#axis_sel":
                    axis_sel_v = 2;
                    break;
                case "#rate_sel":
                    rate_sel_v = 2;
                    break;
                default:
                    break;
            }
        }
        else if ($(idNum).attr("src") == 'mintor/model/png/left_sel.png') {
            $(idNum).attr("src", 'mintor/model/png/mid_sel.png');
            switch (idNum) {
                case "#mode_sel":
                    mode_sel_v = 1;
                    break;
                case "#axis_sel":
                    axis_sel_v = 1;
                    break;
                case "#rate_sel":
                    rate_sel_v = 1;
                    break;
                default:
                    break;
            }
        }
        else if ($(idNum).attr("src") == 'mintor/model/png/right_sel.png') {
            $(idNum).attr("src", 'mintor/model/png/left_sel.png');
            switch (idNum) {
                case "#mode_sel":
                    mode_sel_v = 0;
                    break;
                case "#axis_sel":
                    axis_sel_v = 0;
                    break;
                case "#rate_sel":
                    rate_sel_v = 0;
                    break;
                default:
                    break;
            }
        }
    }

    // function change_sel(eventNum, idNum) {
    //     if (eventNum == 1) {
    //         if ($(idNum).attr("src") == 'mintor/model/png/mid_sel.png') {
    //             $(idNum).attr("src", 'mintor/model/png/left_sel.png');
    //             switch (idNum) {
    //                 case "#mode_sel":
    //                     mode_sel_v = 0;
    //                     break;
    //                 case "#axis_sel":
    //                     axis_sel_v = 0;
    //                     break;
    //                 case "#rate_sel":
    //                     rate_sel_v = 0;
    //                     break;
    //                 default:
    //                     break;
    //             }
    //         }
    //         else if ($(idNum).attr("src") == 'mintor/model/png/right_sel.png') {
    //             $(idNum).attr("src", 'mintor/model/png/mid_sel.png');
    //             switch (idNum) {
    //                 case "#mode_sel":
    //                     mode_sel_v = 1;
    //                     break;
    //                 case "#axis_sel":
    //                     axis_sel_v = 1;
    //                     break;
    //                 case "#rate_sel":
    //                     rate_sel_v = 1;
    //                     break;
    //                 default:
    //                     break;
    //             }
    //         }
    //     }
    //     else if (eventNum == 3) {
    //         if ($(idNum).attr("src") == 'mintor/model/png/mid_sel.png') {
    //             $(idNum).attr("src", 'mintor/model/png/right_sel.png');
    //             switch (idNum) {
    //                 case "#mode_sel":
    //                     mode_sel_v = 2;
    //                     break;
    //                 case "#axis_sel":
    //                     axis_sel_v = 2;
    //                     break;
    //                 case "#rate_sel":
    //                     rate_sel_v = 2;
    //                     break;
    //                 default:
    //                     break;
    //             }
    //         }
    //         else if ($(idNum).attr("src") == 'mintor/model/png/left_sel.png') {
    //             $(idNum).attr("src", 'mintor/model/png/mid_sel.png');
    //             switch (idNum) {
    //                 case "#mode_sel":
    //                     mode_sel_v = 1;
    //                     break;
    //                 case "#axis_sel":
    //                     axis_sel_v = 1;
    //                     break;
    //                 case "#rate_sel":
    //                     rate_sel_v = 1;
    //                     break;
    //                 default:
    //                     break;
    //             }
    //         }
    //     }
    // }

    $("#pause_sel").click(function () {              // 急停按钮相应事件
        // 急停状态按下
        if ($("#pause_sel").attr("src") == 'mintor/model/png/pause_on.png')
            $("#pause_sel").attr("src", 'mintor/model/png/pause_off.png');
        else {                                       // 非急停状态下按下
            $("#pause_sel").attr("src", 'mintor/model/png/pause_on.png');
            runStatus = false;                        // 进入急停状态，机床停止运动
            maxiGroupRotateSpeed = 0;                 // 主轴停止旋转
        }
    });
    $("#press_input_off").click(function () {
        if ($("#press_input_off").attr("src") == 'mintor/model/png/press_input_off.png') {
            $("#press_input_off").attr("src", 'mintor/model/png/press_input_on.png');
            document.getElementById('pickerbtn').disabled = true;
            $("#pos").hide();
            $("#pwr").hide();
            $("#fuhe").hide();
            $("#maspd").hide();
            document.getElementById('code').focus();
        }
        else {
            $("#press_input_off").attr("src", 'mintor/model/png/press_input_off.png');
            document.getElementById('pickerbtn').disabled = false;
            document.getElementById('code').blur();
        }
    });
    $("#cycle_on").click(function () {
        if ($("#cycle_on").attr("src") == 'mintor/model/png/green_off.png') {
            $("#cycle_on").attr("src", 'mintor/model/png/green_on.png');
            $("#cycle_off").attr("src", 'mintor/model/png/red_off.png');
        }
    });
    $("#cycle_off").click(function () {
        if ($("#cycle_off").attr("src") == 'mintor/model/png/red_off.png') {
            $("#cycle_off").attr("src", 'mintor/model/png/red_on.png');
            $("#cycle_on").attr("src", 'mintor/model/png/green_off.png');
        }
        else $("#cycle_off").attr("src", 'mintor/model/png/red_off.png');
    });
    $("#press_singlerun_off").click(function () {
        if ($("#press_singlerun_off").attr("src") == 'mintor/model/png/press_singlerun_off.png') {
            $("#press_singlerun_off").attr("src", 'mintor/model/png/press_singlerun_on.png');
        }
        else $("#press_singlerun_off").attr("src", 'mintor/model/png/press_singlerun_off.png');
    });

    $("#press_show_off").click(function () {
        runStatus = !runStatus;
        if ($("#press_show_off").attr("src") == 'mintor/model/png/press_show_off.png') {
            $("#press_show_off").attr("src", 'mintor/model/png/press_show_on.png');
            if (runStatus) {
                maxiGroupRotateSpeed = 0.1;
            }
        } else {
            $("#press_show_off").attr("src", 'mintor/model/png/press_show_off.png');
            maxiGroupRotateSpeed = 0;
        }
    });

    $("#press_norun_off").click(function () {
        if ($("#press_norun_off").attr("src") == 'mintor/model/png/press_norun_off.png') {
            $("#press_norun_off").attr("src", 'mintor/model/png/press_norun_on.png');
        }
        else $("#press_norun_off").attr("src", 'mintor/model/png/press_norun_off.png');
    });
    $("#press_selectjump_off").click(function () {
        if ($("#press_selectjump_off").attr("src") == 'mintor/model/png/press_selectjump_off.png') {
            $("#press_selectjump_off").attr("src", 'mintor/model/png/press_selectjump_on.png');
        }
        else $("#press_selectjump_off").attr("src", 'mintor/model/png/press_selectjump_off.png');
    });
    $("#press_selectstop_off").click(function () {
        if ($("#press_selectstop_off").attr("src") == 'mintor/model/png/press_selectstop_off.png') {
            $("#press_selectstop_off").attr("src", 'mintor/model/png/press_selectstop_on.png');
        }
        else $("#press_selectstop_off").attr("src", 'mintor/model/png/press_selectstop_off.png');
    });
    $("#press_machinelock_off").click(function () {
        if ($("#press_machinelock_off").attr("src") == 'mintor/model/png/press_machinelock_off.png') {
            $("#press_machinelock_off").attr("src", 'mintor/model/png/press_machinelock_on.png');
        }
        else $("#press_machinelock_off").attr("src", 'mintor/model/png/press_machinelock_off.png');
    });
    $("#press_zlock_off").click(function () {
        if ($("#press_zlock_off").attr("src") == 'mintor/model/png/press_zlock_off.png') {
            $("#press_zlock_off").attr("src", 'mintor/model/png/press_zlock_on.png');
        }
        else $("#press_zlock_off").attr("src", 'mintor/model/png/press_zlock_off.png');
    });
    $("#press_mstlock_off").click(function () {
        if ($("#press_mstlock_off").attr("src") == 'mintor/model/png/press_mstlock_off.png') {
            $("#press_mstlock_off").attr("src", 'mintor/model/png/press_mstlock_on.png');
        }
        else $("#press_mstlock_off").attr("src", 'mintor/model/png/press_mstlock_off.png');
    });
    $("#press_insert_off").click(function () {
        if ($("#press_insert_off").attr("src") == 'mintor/model/png/press_insert_off.png') {
            $("#press_insert_off").attr("src", 'mintor/model/png/press_insert_on.png');
        }
        else $("#press_insert_off").attr("src", 'mintor/model/png/press_insert_off.png');
    });

    $("#press_spindle_plus_off").click(function () {
        $("#press_spindle_plus_off").attr("src", 'mintor/model/png/press_spindle_plus_on.png');
        $("#press_spindle_stop_off").attr("src", 'mintor/model/png/press_spindle_stop_off.png');
        $("#press_spindle_minus_off").attr("src", 'mintor/model/png/press_spindle_minus_off.png');
        if (maxiGroupRotateSpeed < 0) maxiGroupRotateSpeed = maxiGroupRotateSpeed * -1.0;
        else if (maxiGroupRotateSpeed == 0) maxiGroupRotateSpeed = 0.1;
    });

    $("#press_spindle_stop_off").click(function () {
        $("#press_spindle_plus_off").attr("src", 'mintor/model/png/press_spindle_plus_off.png');
        $("#press_spindle_stop_off").attr("src", 'mintor/model/png/press_spindle_stop_on.png');
        $("#press_spindle_minus_off").attr("src", 'mintor/model/png/press_spindle_minus_off.png');
        maxiGroupRotateSpeed = 0;
    });

    $("#press_spindle_minus_off").click(function () {
        $("#press_spindle_plus_off").attr("src", 'mintor/model/png/press_spindle_plus_off.png');
        $("#press_spindle_stop_off").attr("src", 'mintor/model/png/press_spindle_stop_off.png');
        $("#press_spindle_minus_off").attr("src", 'mintor/model/png/press_spindle_minus_on.png');
        if (maxiGroupRotateSpeed > 0) maxiGroupRotateSpeed = maxiGroupRotateSpeed * -1.0;
        else if (maxiGroupRotateSpeed == 0) maxiGroupRotateSpeed = -0.1;
    });
    $("#press_reset").click(function () {
        ResetMachineMotion();
    });

    var timeout;
    $("#press_axis_plus_off").mousedown(function () {
        $("#press_axis_plus_off").attr("src", 'mintor/model/png/press_axis_plus_on.png');
        stepForwardStep(1);
    });
    $("#press_axis_plus_off").mouseup(function () {
        clearInterval(timeout);
        $("#press_axis_plus_off").attr("src", 'mintor/model/png/press_axis_plus_off.png');
    });
    $("#press_axis_minus_off").mousedown(function () {
        $("#press_axis_minus_off").attr("src", 'mintor/model/png/press_axis_minus_on.png');
        stepForwardStep(0);
    });
    $("#press_axis_minus_off").mouseup(function () {
        clearInterval(timeout);
        $("#press_axis_minus_off").attr("src", 'mintor/model/png/press_axis_minus_off.png');
    });

    function stepForwardStep(m_direction) {                         // 0表示负方向，1表示正方向
        clearInterval(timeout);
        var direction_plus = 1.0;
        if (m_direction == 0) direction_plus = -1.0;
        else direction_plus = 1.0;
        timeout = setInterval(function ()//setInterval会每100毫秒执行一次
        {
            switch (axis_sel_v) {
                case 0:
                    switch (rate_sel_v) {
                        case 0:
                            moveGrouptoRealPositionStep(machineMotion[0], 0, direction_plus * 0.001);
                            break;
                        case 1:
                            moveGrouptoRealPositionStep(machineMotion[0], 0, direction_plus * 0.01);
                            break;
                        case 2:
                            moveGrouptoRealPositionStep(machineMotion[0], 0, direction_plus * 0.1);
                            break;
                        default:
                            break;
                    }
                    break;
                case 1:
                    switch (rate_sel_v) {
                        case 0:
                            moveGrouptoRealPositionStep(machineMotion[1], 1, direction_plus * 0.001);
                            break;
                        case 1:
                            moveGrouptoRealPositionStep(machineMotion[1], 1, direction_plus * 0.01);
                            break;
                        case 2:
                            moveGrouptoRealPositionStep(machineMotion[1], 1, direction_plus * 0.1);
                            break;
                        default:
                            break;
                    }
                    break;
                case 2:
                    switch (rate_sel_v) {
                        case 0:
                            moveGrouptoRealPositionStep(machineMotion[2], 2, direction_plus * 0.001);
                            break;
                        case 1:
                            moveGrouptoRealPositionStep(machineMotion[2], 2, direction_plus * 0.01);
                            break;
                        case 2:
                            moveGrouptoRealPositionStep(machineMotion[2], 2, direction_plus * 0.1);
                            break;
                        default:
                            break;
                    }
                    break;
                default:
                    break;
            }
        }, 100);
    }

    var axis_info_sel = 1;
    $("#left_t").click(function () {
        if (picControl == 0) {
            axis_info_sel--;
            if (axis_info_sel == 0) axis_info_sel = 3;
            changeAxisInfoDisplay();
        }
    });
    $("#right_t").click(function () {
        if (picControl == 0) {
            axis_info_sel++;
            if (axis_info_sel == 4) axis_info_sel = 1;
            changeAxisInfoDisplay();
        }
    });

    function changeAxisInfoDisplay() {
        switch (axis_info_sel) {
            case 1: {
                $("#pwr").hide();
                $("#fuhe").hide();
                $("#pos").show();
                break;
            }
            case 2: {
                $("#pos").hide();
                $("#fuhe").hide();
                $("#pwr").show();
                break;
            }
            case 3: {
                $("#pos").hide();
                $("#pwr").hide();
                $("#fuhe").show();
                break;
            }
            default:
                break;
        }
    }


    function init() {
//        var stats = initStats();                                // 初始化帧数显示插件
//         oRight=document.getElementById('right');
//         oRight.appendChild(container);//把上面的层放到right里

//         定义渲染器的初始大小
        webglRenderWidth=window.innerWidth-$("#info_tip").width();
        webglRenderHeight=window.innerHeight;

        container = document.createElement('div');
        document.body.appendChild(container);


        webGLRenderer = new THREE.WebGLRenderer({antialias: true});      // 生成渲染对象并设置抗锯齿为有效
        webGLRenderer.setPixelRatio(window.devicePixelRatio);
        webGLRenderer.setClearColor(0xaaaaff, 1.0);                            // 设置canvas背景色(clearColor)
        webGLRenderer.setSize(webglRenderWidth, webglRenderHeight);     // 指定渲染的宽高
        webGLRenderer.shadowMap.enabled = true;
        container.appendChild(webGLRenderer.domElement);


        scene = new THREE.Scene();      //定义场景
        camera = new THREE.PerspectiveCamera(60, webglRenderWidth / webglRenderHeight, 0.01, 1e10);
        camera.position.set(-8, 3, -0.2);
        scene.add(camera);
        console.log(camera.position);

        /** 轨道控制器OrbitControls.js是一个用户交互插件，可以实现场景用鼠标交互，让场景动起来，
         * 控制场景的旋转（左键）、平移（右键）、缩放（滚轮）
         * 利用当前摄像机建立鼠标控制
         * 新建一个轨道控制器后，就要让它实时工作和更新，一般写在渲染和动画的函数里面
         */
        controls = new THREE.OrbitControls(camera);

        var dirLight = new THREE.DirectionalLight(0xffffff);  //方向光
        dirLight.position.set(130, 150, 1000).normalize();
        camera.add(dirLight);
        camera.add(dirLight.target);

        var objLoader = new THREE.VRMLLoader();
        objLoader.load('mintor/model/model_original.wrl', function (geometry) {
            geometry.position.set(0, 0, 0);
            scene.add(geometry);
            // totalMd = geometry;

            sensor = geometry.children[0];

            xaxismotion = new Array(sensor.children[3]);                  // X轴运动块数组
            yaxismotion = new Array(sensor.children[3].children[5]);      // Y轴运动块数组
            zaxismotion = new Array(                                      // Z轴运动块数组
                sensor.children[3].children[5].children[2],
                sensor.children[3].children[5].children[3],
                sensor.children[3].children[5].children[4],
                sensor.children[3].children[5].children[5] ,
                sensor.children[3].children[5].children[6]
            );
            machineMotion = new Array(xaxismotion, yaxismotion, zaxismotion);             // 机床运动块数组

            maxis = sensor.children[3].children[5].children[6].children[7]; //VIFS17

            // maxiscolorpoint = sensor.children[3].children[5].children[6].children[13];
            // var length1=maxiscolorpoint.children.length;//914-5553-9210 8296
            // // rightcolorpoint = sensor.children[3].children[5].children[6].children[14];
            // //var length2=rightcolorpoint.children.length;
            // //
            // var gradient11 = new gradientColor('#00FF00', '#FFFF00', 1000);
            // var gradient12 = new gradientColor('#FFFF00', '#FF0000', 3640);
            // var gradient21 = new gradientColor('#00FF00', '#FFFF00', 1000);
            // var gradient22 = new gradientColor('#FFFF00', '#FF0000', length1-5640);
            // //
            // for(var i= 0;i<length1;i++) {
            //     // maxiscolorpoint.children[i].children[0].material.alpha=0.9;
            //
            //     if(i<1000){
            //         maxiscolorpoint.children[i].children[0].material.color.set(gradient11[i]);
            //     }
            //     else if(i<4640){
            //         maxiscolorpoint.children[i].children[0].material.color.set(gradient12[i-1000]);
            //     }
            //     else if(i<5640){
            //         maxiscolorpoint.children[i].children[0].material.color.set(gradient21[i-4640]);
            //     }
            //     else{
            //         maxiscolorpoint.children[i].children[0].material.color.set(gradient22[i-5640]);
            //     }
            // }
            // // var gradient3 = new gradientColor('#00FF00', '#FFFF00', length2);
            // // for(var i= 0;i<length2;i++) {
            // //     rightcolorpoint.children[i].children[0].children[0].material.transparent.set(0.5);
            // //     rightcolorpoint.children[i].children[0].children[0].material.color.set(gradient3[i]);
            // //     // console.log(i);
            // // }
            //
            // setInterval("changeColor()",6000);



            /**将主轴移动到世界坐标中心
             * 思路：建立包围盒，算出来主轴模型的中心点，然后将这个中心点各个取负，
             * 然后将模型偏移这么多距离就来到了场景的中心位置*/

            var box1 = new THREE.Box3().setFromObject(maxis);               // 边界框
            box1.getCenter(maxis.position);                                    // 设置盒子中心

            maxisGroup = new THREE.Group();                                      // 新建物体组
            maxisGroup.add(maxis);                                                 // 将目标块加入组中

            maxis.position.multiplyScalar(-1);                                // 反方向移动
            box1.getCenter(maxisGroup.position);
            scene.add(maxisGroup);

            maxisOrigin.x = maxisGroup.position.x;                            // 获取主轴原始坐标
            maxisOrigin.y = maxisGroup.position.y;
            maxisOrigin.z = maxisGroup.position.z;

            maxisGroup.position.set(maxisBase.x, maxisBase.y, maxisBase.z);   // 把主轴放到基准坐标
            // console.log(maxis.position,maxisGroup.position);

            maxisDeviation.x = maxisBase.x - maxisOrigin.x;                     // 计算主轴偏移
            maxisDeviation.y = maxisBase.y - maxisOrigin.y;
            maxisDeviation.z = maxisBase.z - maxisOrigin.z;
            axisBase.x = maxisDeviation.x - machineMotion[0][0].position.x;     // 计算三轴初始化后基准坐标
            axisBase.y = maxisDeviation.y - machineMotion[2][0].position.y;
            axisBase.z = maxisDeviation.z - machineMotion[1][0].position.z;
            // console.log(axisBase.z);

            initAllAxisGroup();                                                 // 把三轴的块移到基准零点

            container.addEventListener('mousemove', onMouseDownzaxis, false);
            container.addEventListener('mousedown', onMouseDownR, false);
        });
    }

    function initStats() {
        var stats = new Stats();
        stats.setMode(0); // 0: fps, 1: ms
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';
        $("#Stats-output").append(stats.domElement);
        return stats;
    }

    function onMouseDownzaxis(event) {
        //THREE.Raycaster射线，用于鼠标拾取（计算出鼠标移过的三维空间中的对象）
        raycaster = new THREE.Raycaster();
        mouse = new THREE.Vector2();
        event.preventDefault();                                                    // 禁用事件的默认处理程序

        //将鼠标点击位置的屏幕坐标转成threejs中的标准坐标
        mouse.x = (event.clientX / webglRenderWidth) * 2 - 1;                       // 计算鼠标坐标
        mouse.y = -(event.clientY / webglRenderHeight) * 2 + 1;

        raycaster.setFromCamera(mouse, camera);                                   // 设置射线，射线的起点是照相机，终点是鼠标点击的点

        var intersects = raycaster.intersectObjects(sensor.children, true);       //检查射线和物体之间的所有交叉点（true表示其包含后代）
        var intersected;
        if (intersects.length > 0) {                                              // 是否拾取到物体
            intersected = intersects[0].object;      //选中第一个射线相交的物体
            if (intersected) {
                var throughBoxArray = intersects[0].object.matrixWorld.elements.toString();

                for (var i = 1; i < 91; i++) {
                    var zaxissensor = sensor.children[3].children[5].children[6].children[6].children[i];//VIFS16，Z轴上的传感器
                    if (throughBoxArray == zaxissensor.children[0].matrixWorld.elements.toString()) {
                        container.style.cursor = 'pointer';
                        zaxissensor.scale.set(3, 1.5, 2);
                        zaxissensor.children[0].children[0].material.color.set(0xff0000);

                        /*document.getElementById("lbl_tip").style.left = event.clientX + 10 + "px";
                         document.getElementById("lbl_tip").style.top = event.clientY + "px";*/
                        getData(event, temdatas, zaxissensor.name);

                        /*document.getElementById("sensorNum").innerHTML = "<p2 id='sensorNum'>传感器编号: <span class='c'>001-SDT00-" + zaxissensor.name + "</span><br/></p2>";
                         document.getElementById("sensorValue").innerHTML = "<p2 id='sensorValue'>数值: <span class='c'> " + temdata+ "度</span><br/></p2>";
                         $('#lbl_tip').show();*/
                        break;
                    }
                    else {
                        container.style.cursor = 'auto';
                        document.getElementById("lbl_tip").style.display = "none";
                        sensor.children[3].children[5].children[6].children[6].children[i].scale.set(1, 1, 1);
                        sensor.children[3].children[5].children[6].children[6].children[i].children[0].children[0].material.color.set(0x00ffff);

                        //左下方传感器，VIFS01
                        if (i < 31 && throughBoxArray == sensor.children[0].children[i].children[0].matrixWorld.elements.toString()) {
                            var xleftsensor = sensor.children[0].children[i];
                            container.style.cursor = 'pointer';
                            xleftsensor.scale.set(3, 1.5, 2);
                            xleftsensor.children[0].children[0].material.color.set(0xff0000);
                            /* document.getElementById("lbl_tip").style.left = event.clientX + 10 + "px";
                             document.getElementById("lbl_tip").style.top = event.clientY + "px";*/
                            getData(event, temdatas, xleftsensor.name);
                            /*document.getElementById("sensorNum").innerHTML = "<p2 id='sensorNum'>传感器编号: <span class='c'>001-SDT00-" + xleftsensor.name + "</span><br/></p2>";
                             document.getElementById("sensorValue").innerHTML = "<p2 id='sensorValue'>数值: <span class='c'> " + i + "度</span><br/></p2>";
                             $('#lbl_tip').show();*/
                            break;
                        } else if (i < 31) {
                            sensor.children[0].children[i].scale.set(1, 1, 1);
                            sensor.children[0].children[i].children[0].children[0].material.color.set(0x00ffff);
                        }

                        //右下方传感器，VIFS02
                        if (i < 31 && throughBoxArray == sensor.children[1].children[i].children[0].matrixWorld.elements.toString()) {
                            var xrightsensor = sensor.children[1].children[i];
                            container.style.cursor = 'pointer';
                            xrightsensor.scale.set(3, 1.5, 2);
                            xrightsensor.children[0].children[0].material.color.set(0xff0000);
                            /*document.getElementById("lbl_tip").style.left = event.clientX + 10 + "px";
                             document.getElementById("lbl_tip").style.top = event.clientY + "px";*/
                            getData(event, temdatas, xrightsensor.name);
                            /*document.getElementById("sensorNum").innerHTML = "<p2 id='sensorNum'>传感器编号: <span class='c'>001-SDT00-" + xrightsensor.name + "</span><br/></p2>";
                             document.getElementById("sensorValue").innerHTML = "<p2 id='sensorValue'>数值: <span class='c'> " + i + "度</span><br/></p2>";
                             $('#lbl_tip').show();*/
                            break;
                        } else if (i < 31) {
                            sensor.children[1].children[i].scale.set(1, 1, 1);
                            sensor.children[1].children[i].children[0].children[0].material.color.set(0x00ffff);
                        }

                        //左立侧传感器，VIFS25
                        if (i < 25 && throughBoxArray == sensor.children[3].children[4].children[i].children[0].matrixWorld.elements.toString()) {
                            var coleftsensor = sensor.children[3].children[4].children[i];
                            container.style.cursor = 'pointer';
                            coleftsensor.scale.set(3, 1.5, 2);
                            coleftsensor.children[0].children[0].material.color.set(0xff0000);
                            /*document.getElementById("lbl_tip").style.left = event.clientX + 10 + "px";
                             document.getElementById("lbl_tip").style.top = event.clientY + "px";*/
                            getData(event, temdatas, coleftsensor.name);
                            /*document.getElementById("sensorNum").innerHTML = "<p2 id='sensorNum'>传感器编号: <span class='c'>001-SDT00-" + coleftsensor.name + "</span><br/></p2>";
                             document.getElementById("sensorValue").innerHTML = "<p2 id='sensorValue'>数值: <span class='c'> " + i + "度</span><br/></p2>";
                             $('#lbl_tip').show();*/
                            break;
                        } else if (i < 25) {
                            sensor.children[3].children[4].children[i].scale.set(1, 1, 1);
                            sensor.children[3].children[4].children[i].children[0].children[0].material.color.set(0x00ffff);
                        }

                        //右立侧传感器，VIFS24
                        if (i < 25 && throughBoxArray == sensor.children[3].children[3].children[i].children[0].matrixWorld.elements.toString()) {
                            var corightsensor = sensor.children[3].children[3].children[i];
                            container.style.cursor = 'pointer';
                            corightsensor.scale.set(3, 1.5, 2);
                            corightsensor.children[0].children[0].material.color.set(0xff0000);
                            /*document.getElementById("lbl_tip").style.left = event.clientX + 10 + "px";
                             document.getElementById("lbl_tip").style.top = event.clientY + "px";*/
                            getData(event, temdatas, corightsensor.name);
                            /*document.getElementById("sensorNum").innerHTML = "<p2 id='sensorNum'>传感器编号: <span class='c'>001-SDT00-" + corightsensor.name + "</span><br/></p2>";
                             document.getElementById("sensorValue").innerHTML = "<p2 id='sensorValue'>数值: <span class='c'> " + i + "度</span><br/></p2>";
                             $('#lbl_tip').show();*/
                            break;
                        } else if (i < 25) {
                            sensor.children[3].children[3].children[i].scale.set(1, 1, 1);
                            sensor.children[3].children[3].children[i].children[0].children[0].material.color.set(0x00ffff);
                        }
                        //横梁传感器，VIFS05
                        if (i < 21 && throughBoxArray == sensor.children[3].children[2].children[i].children[0].matrixWorld.elements.toString()) {
                            var yaxissensor = sensor.children[3].children[2].children[i];
                            container.style.cursor = 'pointer';
                            yaxissensor.scale.set(3, 1.5, 2);
                            yaxissensor.children[0].children[0].material.color.set(0xff0000);

                            /*document.getElementById("lbl_tip").style.left = event.clientX + 10 + "px";
                             document.getElementById("lbl_tip").style.top = event.clientY + "px";*/
                            getData(event, temdatas, yaxissensor.name);
                            /*document.getElementById("sensorNum").innerHTML = "<p2 id='sensorNum'>传感器编号: <span class='c'>001-SDT00-" + yaxissensor.name + "</span><br/></p2>";
                             document.getElementById("sensorValue").innerHTML = "<p2 id='sensorValue'>数值: <span class='c'> " + i + "度</span><br/></p2>";
                             $('#lbl_tip').show();*/
                            break;
                        } else if (i < 21) {
                            sensor.children[3].children[2].children[i].scale.set(1, 1, 1);
                            sensor.children[3].children[2].children[i].children[0].children[0].material.color.set(0x00ffff);
                        }

                    }
                }
            }
        }
        else {
            container.style.cursor = 'auto';
        }

        var intersectsm = raycaster.intersectObjects(maxis.children, true);
        var intersectedm;
        if (intersectsm.length > 0) {                                              // 是否拾取到物体
            intersectedm = intersectsm[0].object;
            if (intersectedm) {
                var throughBoxArraym = intersectsm[0].object.matrixWorld.elements.toString();
                //主轴传感器，VIFS17
                for (var i = 1; i < 13; i++) {
                    if (throughBoxArraym == maxis.children[i].children[0].matrixWorld.elements.toString()) {
                        var maxissensor = maxis.children[i];
                        container.style.cursor = 'pointer';
                        maxissensor.scale.set(3, 1.5, 2);
                        maxissensor.children[0].children[0].material.color.set(0xff0000);
                        getData(event, temdatas, maxissensor.name);
                        break;
                    } else {
                        maxis.children[i].scale.set(1, 1, 1);
                        maxis.children[i].children[0].children[0].material.color.set(0x00ffff);
                    }
                }
            }
        }
    }


    var content = null;     //记录文本框中内容
    var commandindex = [];   //每个G指令中包含的参数
    var commandcode, Xdisplayment, Ydisplayment, Zdisplayment, speed=2700, index = [], indexsort = [], codemap = [], xdis, ydis, zdis;
    //命令行、G01指令、X位移、Y位移、Z位移、速度、XYZF在字符串中的位置集合、XYZF位置集合排序去除未出现的点、以键值对形式存储位移与方向
    var t0m, t0, t1, t2;


    var number = -1, gcodesplit, gcodearray, gcode, command;     //number用来记录执行G指令的次数

    $('#pickerbtn').click(function () {
        $('#picker').click();
    });

    /* 读取上传的文本文件内容 */
    function onFileSelected(event) {
        // $("#pos").hide();
        $("#pwr").hide();
        $("#fuhe").hide();
        // $("#maspd").hide();

        var selectedFile = event.target.files[0];
        var reader = new FileReader();
        reader.readAsText(selectedFile);//来读取一个含中文的.txt文件
        reader.onload = function (event) {
            var result = document.getElementById("code");

            result.innerHTML = "";
            result.innerHTML = event.target.result;

            result.value = "";
            result.value = event.target.result;
        };
    }

    var filed = document.getElementById('pickerbtn'); //当机床在运动状态中，选着G代码文件不能点击
    var time, starttime, stoptime,endtime, dingshi, tongjitime = [], clock1;

    /* 排序代码 */
    function sortNumber(a, b) {
        return a - b
    }


    /* 读取G代码中的字符G，获取指令集合 */
    function readGcode() {
        t0m = false;
        t0 = false;
        t1 = false;
        t2 = [];
        number = number + 1;

        /* 定义删除数组中元素的方法.del()，相应下标发生改变 */
        Array.prototype.del = function (n) {　//n表示第几项，从0开始算起。
            //prototype为对象原型，注意这里为对象增加自定义方法的方法。
            if (n < 0)　//如果n<0，则不进行任何操作。
                return this;
            else
                return this.slice(0, n).concat(this.slice(n + 1, this.length));
        }


        gcodesplit = content.toString().split("G");
        if(gcodesplit[0]!= ""){//判断G代码的第一个字符是否为G，若是，则gcodesplit[0]为空
            alert("请输入正确的G代码");
            return
        }
        // console.log(gcodesplit );
        gcodearray = gcodesplit.del(0);　//从0算起，删除第1项
        // console.log("gcodearray.length"+gcodearray.length );

        if (number < gcodearray.length) {
            gcode = gcodearray[number];

            /* G代码没有格式要求，依据字符串切分 */
            if (gcode.indexOf(";") >= 0) {
                command = gcode.toString().split(";")[0];//字符串以;隔开
            } else {
                command = gcode;
            }

            commandcode = command.substring(0, 2);//substring截取字符串"01"

            index[0] = command.indexOf("X");
            if (index[0] < 0) {
                codemap["Xdisplayment"] = 0;
            }
            index[1] = command.indexOf("Y");
            if (index[1] < 0) {
                codemap["Ydisplayment"] = 0;
            }
            index[2] = command.indexOf("Z");
            if (index[2]< 0) {
                codemap["Zdisplayment"] = 0;
            }
            index[3] = command.indexOf("F");
            if (index[3] < 0) {
                codemap["Fdisplayment"] = speed;
            }

            index.sort(sortNumber);
            // alert(index.sort(sortNumber));
            var delet = -1;
            for (var i = 0; i < 4; i++) {
                if (index[i] < 0) {
                    delet = i;
                }
            }
            if (delet == 3) {
                alert("请输入正确的G代码");
            } else if (delet == 2) {
                indexsort = index.del(2).del(1).del(0);
            } else if (delet == 1) {
                indexsort = index.del(1).del(0);
            } else if (delet == 0) {
                indexsort = index.del(0);
            } else {
                indexsort = index;
            }

            for (i = 0; i < indexsort.length; i++) {
                var name = command.substring(indexsort[i], indexsort[i] + 1) + "displayment";
                codemap[name] = command.substring(indexsort[i] + 1, indexsort[i + 1]);
            }
            xdis = parseFloat(codemap["Xdisplayment"]);
            ydis = parseFloat(codemap["Ydisplayment"]);
            zdis = parseFloat(codemap["Zdisplayment"]);
            Xdisplayment = xdis / 5000 * 3;    //x轴行程5000，虚拟位置[-1,2],前为负，与实际相同
            Ydisplayment = ydis / 650 * 0.6;      //y轴行程650，虚拟位置[-0.3,0.3],下为负，与实际相同
            Zdisplayment = zdis / 4000;
            // Zdisplayment = zdis * (-1) / 4000;  //z轴行程4000，虚拟位置[-1,1],左为负，与实际相反
            speed = parseFloat(codemap["Fdisplayment"]);

            var pingfanghe = Math.pow(xdis, 2) + Math.pow(ydis, 2) + Math.pow(zdis, 2);
            total = Math.sqrt(pingfanghe);
            time = total / speed * 60000;   //speed单位是毫米每分钟，转换为毫秒
            if (time > 0) {
                tongjitime[number] = time;
                if (commandcode == "01") {
                    movebygcode();
                }else{
                    alert("请输入正确的G代码");
                    return
                }
            }
        }
        else {

            endtime = new Date().getTime();
            console.log("【G代码执行完毕】"+endtime);

            alert("G代码运行完毕！");
            number = -1;
            gcodesplit = [];
            gcodearray = [];
            gcode = 0;
            command = 0;
            if ($("#press_input_off").attr("src") == 'mintor/model/png/press_input_on.png') {
                $("#code").removeAttr("readonly");
            } else {
                filed.disabled = false;
            }
            // var u1 = document.getElementById("code");
            // u1.innerHTML ="";
            var u2 = document.getElementById("start");
            u2.disabled = false;
            var u3 = document.getElementById("stop");
            u3.disabled = true;
        }
    }



    // var x0m,y0m,z0m;

    /* 读取G代码，按照指定的轨迹运动 （01指令）*/
    function movebygcode() {     //  将某个轴移动到pos位置

        /* 主轴（底部）移动（包含xyz方向）*/

        var pos00m = maxisGroup.position;
        var x0m = pos00m.x, y0m = pos00m.y, z0m = pos00m.z;//起点

        x0m = Xdisplayment + x0m;
        y0m = Ydisplayment + y0m;
        z0m = Zdisplayment + z0m;
        var pos01m = {x: x0m, y: y0m, z: z0m};//终点

        if (!t0m) {
            t0m = new TWEEN.Tween(pos00m)
                .to(pos01m, time)
                .onUpdate(function () {

                    // maxisGroup.position = pos00m;
                    currentx=maxisGroup.position.x,currenty=maxisGroup.position.y,currentz=maxisGroup.position.z;
                    // console.log(currentx,currenty,currentz);

                    geom = new THREE.Geometry();
                    var material = new THREE.LineBasicMaterial({vertexColors: true});
                    var color1 = new THREE.Color(0xFF0000), color2 = new THREE.Color(0xFF0000);
                    // 线的材质可以由2点的颜色决定
                    var p1 = new THREE.Vector3(orix, oriy -0.5 , oriz);
                    var p2 = new THREE.Vector3(currentx, currenty -0.5, currentz);
                    geom.vertices.push(p1);
                    geom.vertices.push(p2);
                    geom.colors.push(color1, color2);
                    line = new THREE.Line(geom, material, THREE.LineSegments);

                    scene.add(line);
                    splineHelperObjects.push(line);
                    orix = currentx;
                    oriy = currenty;
                    oriz = currentz;

                    /**坐标转换，显示实际机床的运动轨迹坐标*/
                    var xCurPos=currentx/3*5000;
                    var yCurPos=currenty/0.6*650;
                    var zCurPos=currentz*4000;
                    document.getElementById("showpos").innerHTML = "x轴坐标："+xCurPos.toFixed(3)+"&#10y轴坐标："+yCurPos.toFixed(3)+"&#10z轴坐标："+zCurPos.toFixed(3)+"&#10主轴转速：1000.00";
                });
        }


        /* x轴方向运动*/
        var pos00 = machineMotion[0][0].position;
        var x0 = pos00.x, y0 = pos00.y, z0 = pos00.z;
        x0 = Xdisplayment + x0;
        var pos01 = {x: x0, y: y0, z: z0};
        if (!t0) {
            t0 = new TWEEN.Tween(pos00)
                .to(pos01, time)
                .onUpdate(function () {
                    pos00 = pos00;
                });
        }

        /* z轴方向运动*/
        var pos10 = machineMotion[1][0].position;
        var x1 = pos10.x, y1 = pos10.y, z1 = pos10.z;
        z1 = Zdisplayment + z1;
        var pos11 = {x: x1, y: y1, z: z1};
        if (!t1) {
            t1 = new TWEEN.Tween(pos10)
                .to(pos11, time)
                .onUpdate(function () {
                    pos10 = pos10;
                });
        }

        /* y轴方向运动*/
        for (var iTem = 0; iTem < 5; iTem++) {
            var pos20 = machineMotion[2][iTem].position;
            var x2 = pos20.x, y2 = pos20.y, z2 = pos20.z;
            y2 = Ydisplayment + y2;
            var pos21 = {x: x2, y: y2, z: z2};
            if (!t2[iTem]) {
                t2[iTem] = new TWEEN.Tween(pos20)
                    .to(pos21, time)
                    .onUpdate(function () {
                        pos20 = pos20;
                    });
            }
        }
        /* 动画启动*/
        t0m.start();
        t0.start();
        t1.start();
        t2[0].start();
        t2[1].start();
        t2[2].start();
        t2[3].start();
        t2[4].start();

        starttime = new Date().getTime();
        console.log("【G代码开始执行】"+starttime);

        clock1 = window.setTimeout("readGcode()", time);    //定时器
    }


    var stop = document.getElementById('stop');

    //    var judge=true;     //false表示当前按钮为停止按钮，true表示为开始按钮
    stop.onclick = function () {
//        judge=!judge;
//        if(!judge){
//            $('#stop').text("start");

        var state = false;
        t0m.stop();
        t0.stop();
        t1.stop();
        t2[0].stop();
        t2[1].stop();
        t2[2].stop();
        t2[3].stop();
        t2[4].stop();
        stoptime = new Date().getTime();
        console.log("【G代码执行被终止】"+stoptime);
//        }else{
//            $('#stop').text("stop");
//            t0m.start();
//            t0.start();
//            t1.start();
//            t2[0].start();
//            t2[1].start();
//            t2[2].start();
//            t2[3].start();
//            t2[4].start();
//        }

        if ($("#press_input_off").attr("src") == 'mintor/model/png/press_input_on.png') {
            $("#code").removeAttr("readonly");
        } else {
            filed.disabled = false;
        }

        // dingshi = stoptime - starttime;
        // for (var itime in tongjitime) {
        //     dingshi = dingshi - tongjitime[itime];
        //     console.log(dingshi);
        // }

        window.clearTimeout(clock1);
        number = number - 1;
        document.getElementById('stop').disabled = true;
        document.getElementById('start').disabled = false;

//        alert(dingshi);
    };


    //实现clear键的功能
    function clearText() {
        // $("#BottomImg").css("display", "block");
        $("#canvas").css("display", "none");
        picControl = 0;
        //清空文本框
        $("#code").val("");
        document.getElementById("showpos").innerHTML = "x轴坐标：0.00&#10y轴坐标：0.00&#10z轴坐标：0.00&#10主轴转速：0.00";
        document.getElementById("showpower").innerHTML ="x轴功率：0.00&#10y轴功率：0.00&#10z轴功率：0.00&#10主轴转速：0.00";
        document.getElementById("showload").innerHTML ="x轴负荷：0.00&#10y轴负荷：0.00&#10z轴负荷：0.00&#10主轴转速：0.00";


        var allChildrenlen = scene.children.length;
        var lastObject = scene.children[allChildrenlen-1];
        if(allChildrenlen>3){
            for(var i=3;i<allChildrenlen;i++){
                scene.remove(splineHelperObjects.pop());
            }
        }

    }


    var start = document.getElementById('start');
    start.onclick = function () {

        orimaxisposition =maxisGroup.position;
        // orimaxisposition = {x: 0, y: 1.25, z: 0};
        // orix=orimaxisposition.x,oriy=orimaxisposition.y,oriz=orimaxisposition.z;
        // currentx=orix, currenty=oriy,currentz=oriz;
        orix=orimaxisposition.x,oriy=orimaxisposition.y,oriz=orimaxisposition.z;

        picControl = 1;  //运行时左右键不可单击

        content =$("#code").val();
        if (content == "") {
            alert("请上传代码文件或者手动输入代码");
            return
        }

        if ($("#press_input_off").attr("src") == 'mintor/model/png/press_input_on.png') {
            $("#code").attr("readonly", true);//不可编辑
        } else {
            filed.disabled = true;
        }
        document.getElementById('start').disabled = true;
        document.getElementById('stop').disabled = false;

        readGcode();
    };

    var poswebSocket = new WebSocket('ws://' + socketPath + '/websocket/001-POS');

    poswebSocket.onerror = function (event) {			// socket错误响应事件
        onError(event);
    };
    poswebSocket.onopen = function (event) {			// socket开启响应事件
        onOpen(event);
    };
    poswebSocket.onmessage = function (event) {		// socket接收响应事件
        // var data = JSON.parse(event.data);
        // if (data.value != "0.0" && data.value != "0,0,0,0" && data.value != "") {
        //     var temvalue = data.value.toString();
        //     postionarr = temvalue.split(",");
        //     xaxis = parseFloat(postionarr[0]);
        //     yaxis = parseFloat(postionarr[1]);
        //     zaxis = parseFloat(postionarr[2]);
        //     mspeed = parseFloat(postionarr[3]);
        //     moveGrouptoRealPosition(machineMotion[0], 0, (-2500 - xaxis) * 3 / 2500);
        //     moveGrouptoRealPosition(machineMotion[1], 1, (2000 + yaxis) * 3 / 2000);
        //     moveGrouptoRealPosition(machineMotion[2], 2, zaxis * 1.3 / 650);
        //     document.getElementById("xpos").innerHTML = "<p2 id='xpos'>x轴坐标：<span class='c'>" + xaxis.toFixed(4) + "</span><br/></p2>";
        //     document.getElementById("ypos").innerHTML = "<p2 id='ypos'>y轴坐标：<span class='c'>" + yaxis.toFixed(4) + "</span><br/></p2>";
        //     document.getElementById("zpos").innerHTML = "<p2 id='zpos'>z轴坐标：<span class='c'>" + zaxis.toFixed(4) + "</span><br/></p2>";
        //     document.getElementById("maspd").innerHTML = "<p2 id='maspd'>主轴转速：<span class='c'>" + mspeed.toFixed(4) + "</span><br/></p2>";
        onMessage(event);
        // }
    };


    function onOpen(event) {
    }

    function onError(event) {
        alert(event.data);
    }

    function onMessage(event) {
        console.log(event.data);
    }

    function getData(event, temdatas, name) {//"001-SFT00-11":"47.43","001-SFT00-12":"39.33/20.18",
        var start = temdatas.indexOf(name);   //根据传感器名字查找其在字符串中开始位置
        if (start > 0) {
            var end = temdatas.indexOf(",", start + 15);         //查找数据结束位置
            temdata = temdatas.substring(start + 15, end - 1);
        } else {
            temdata = "0";
        }
        document.getElementById("lbl_tip").style.left = event.clientX + 10 + "px";
        document.getElementById("lbl_tip").style.top = event.clientY + "px";
        document.getElementById("sensorNum").innerHTML = "<p2 id='sensorNum'><span class='c'>传感器: " + name + "</span><br/></p2>";
        if (temdata.indexOf("/") > 0) {
            document.getElementById("sensorValue").innerHTML = "<p2 id='sensorValue'><span class='c'>数值（FBG/DBS1820）: " + temdata + "度</span><br/></p2>";
        } else {
            document.getElementById("sensorValue").innerHTML = "<p2 id='sensorValue'><span class='c'>数值: " + temdata + "度</span><br/></p2>";
        }
        $('#lbl_tip').show();
    }

    function onMouseDownR(event) {
        if (event.button == 1) {                        // 滚轮键
            xdir = !xdir;
        }
        if (event.button == 0) {                        // 左键
            ydir = !ydir;
        }
        if (event.button == 2) {                        // 右键
            zdir = !zdir;
        }
    }
    ;
    // $('#example_show').click(function (event) {
    //     runStatus = !runStatus;
    //     if (runStatus) {
    //         maxiGroupRotateSpeed = 0.1;
    //         $('#example_show').text("停止");
    //     }
    //     else {
    //         maxiGroupRotateSpeed = 0;
    //         $('#example_show').text("演示");
    //     }
    // });
    function moveGroupPositionX(tempGroup) {
        if (getRealMaxisGroupPosition(0) < -3.0 && xdir == false || getRealMaxisGroupPosition(0) > 3.0 && xdir == true) return;
        for (var iTem in tempGroup) {
            tempGroup[iTem].position.x -= 0.001 * (xdir == false ? -1 : 1);      // 表示x轴运动
        }
        maxisGroup.position.x -= 0.001 * (xdir == false ? -1 : 1);              // 主轴x方向跟随x轴运动
    }

    function moveGroupPositionY(tempGroup) {
        if ((getRealMaxisGroupPosition(1) < -3.0 && ydir == false)           // 到达限位之后停止运动
            || (getRealMaxisGroupPosition(1) > 3.0 && ydir == true)) return;
        for (var iTem in tempGroup) {
            tempGroup[iTem].position.z += 0.001 * (ydir == true ? -1 : 1);       // 表示y轴运动
        }
        maxisGroup.position.z += 0.001 * (ydir == true ? -1 : 1);                // 主轴y方向跟随y轴运动
    }

    function moveGroupPositionZ(tempGroup) {
        if ((getRealMaxisGroupPosition(2) < -0.3 && zdir == false)           // 到达限位之后停止运动
            || (getRealMaxisGroupPosition(2) > 1.0 && zdir == true)) return;
        for (var iTem in tempGroup) {
            tempGroup[iTem].position.y += 0.001 * (zdir == false ? -1 : 1);        // 表示z轴运动
        }
        maxisGroup.position.y += 0.001 * (zdir == false ? -1 : 1);                 // 主轴z方向跟随z轴运动
    }

    function initAxisGrouptoPosition(tempGroup, taxis, pos) {
        for (var iTem in tempGroup) {
            switch (taxis) {
                case 0:
                    tempGroup[iTem].position.x = pos;
                    break;           // x轴移动到目的位置
                case 1:
                    tempGroup[iTem].position.z = pos;
                    break;           // y轴移动到目的位置
                case 2:
                    tempGroup[iTem].position.y = pos;
                    break;           // z轴移动到目的位置
                default:
                    break;
            }

        }
    }

    function initAllAxisGroup() {                                       // 机床三轴根据主轴偏移初始化函数
        initAxisGrouptoPosition(machineMotion[0], 0, axisBase.x);   //前后，后为+
        initAxisGrouptoPosition(machineMotion[1], 1, axisBase.z);    //左右，右为+
        initAxisGrouptoPosition(machineMotion[2], 2, axisBase.y);   //上下，上为+
    }

    function ResetMachineMotion() {
        moveGrouptoRealPosition(machineMotion[0], 0, 0);
        moveGrouptoRealPosition(machineMotion[1], 1, 0);
        moveGrouptoRealPosition(machineMotion[2], 2, 0);
    }

    function infoShowChange() {
        var xpos = getRealMaxisGroupPosition(0);
        var ypos = getRealMaxisGroupPosition(1);
        var zpos = getRealMaxisGroupPosition(2);
        var maspd = getRealMaxisGroupPosition(3);

//        document.getElementById("maspd").innerHTML = "<p2 id='maspd'>主轴速度：<span class='c'>" + maspd.toFixed(3) + "</span><br/></p2>";

        if (axis_info_sel != 1) return;                                    // 不是坐标显示时不显示
//        document.getElementById("xpos").innerHTML = "<p2 id='xpos'>x轴坐标 ：<span class='c'>" + xpos.toFixed(3) + "</span><br/></p2>";
//        document.getElementById("ypos").innerHTML = "<p2 id='ypos'>y轴坐标 ：<span class='c'>" + ypos.toFixed(3) + "</span><br/></p2>";
//        document.getElementById("zpos").innerHTML = "<p2 id='zpos'>z轴坐标 ：<span class='c'>" + zpos.toFixed(3) + "</span><br/></p2>";
    }

    function getRealMaxisGroupPosition(axis_which) {         //  参数为0表示x方向，1表示y方向
        //  2表示z方向，3表示转速
        if (axis_which == 0) return (maxisGroup.position.x - maxisBase.x) * -1.0;
        if (axis_which == 1) return (maxisGroup.position.z - maxisBase.z) * -1.0;
        if (axis_which == 2) return (maxisGroup.position.y - maxisBase.y) * 1.0;
//        if(axis_which==3) return maxisGroup.rotation.y * -1.0;
        if (axis_which == 3) return maxiGroupRotateSpeed;
    }

    function rotatyMaxisGroupPosition(m_speed) {                //  参数为旋转速度
        maxisGroup.rotateY(m_speed * -1.0);                       // 主轴旋转动作
    }

    function moveGrouptoRealPosition(tempGroup, taxis, pos) {     //  讲某个轴移动到pos位置
        for (var iTem in tempGroup) {
            switch (taxis) {
                case 0:
                    tempGroup[iTem].position.x = (pos / -1.0 + maxisBase.x - maxisGroup.position.x)
                        + tempGroup[iTem].position.x;
                    break;           // x轴移动到目的位置
                case 1:
                    tempGroup[iTem].position.z = (pos / -1.0 + maxisBase.z - maxisGroup.position.z)
                        + tempGroup[iTem].position.z;
                    break;           // y轴移动到目的位置
                case 2:
                    tempGroup[iTem].position.y = (pos / 1.0 + maxisBase.y - maxisGroup.position.y)
                        + tempGroup[iTem].position.y;
                    break;           // z轴移动到目的位置
                default:
                    break;
            }
        }
        switch (taxis) {
            case 0:
                maxisGroup.position.x = pos / -1.0 + maxisBase.x;
                break; // 主轴x方向移动到目的位置
            case 1:
                maxisGroup.position.z = pos / -1.0 + maxisBase.z;
                break; // 主轴y方向移动到目的位置
            case 2:
                maxisGroup.position.y = pos / 1.0 + maxisBase.y;
                break;  // 主轴z方向移动到目的位置
            default:
                break;
        }
    }

    function moveGrouptoRealPositionStep(tempGroup, taxis, m_step) {          //  讲某个轴移动m_step个单位
        for (var iTem in tempGroup) {
            switch (taxis) {
                case 0:
                    tempGroup[iTem].position.x = m_step * -1.0 + tempGroup[iTem].position.x;
                    break;           // x轴移动到目的位置
                case 1:
                    tempGroup[iTem].position.z = m_step * -1.0 + tempGroup[iTem].position.z;
                    break;           // y轴移动到目的位置
                case 2:
                    tempGroup[iTem].position.y = m_step * 1.0 + tempGroup[iTem].position.y;
                    break;           // z轴移动到目的位置
                default:
                    break;
            }
        }
        switch (taxis) {
            case 0:
                maxisGroup.position.x = (getRealMaxisGroupPosition(taxis) + m_step) / -1.0 + maxisBase.x;
                break; // 主轴x方向移动到目的位置
            case 1:
                maxisGroup.position.z = (getRealMaxisGroupPosition(taxis) + m_step) / -1.0 + maxisBase.z;
                break; // 主轴y方向移动到目的位置
            case 2:
                maxisGroup.position.y = (getRealMaxisGroupPosition(taxis) + m_step) / 1.0 + maxisBase.y;
                break;  // 主轴z方向移动到目的位置
            default:
                break;
        }
    }

    //    function moveGrouptoRealPositionAtSpeed(tempGroup,taxis,pos,m_speed) {     //  讲某个轴移动到pos位置
    //        if(m_speed<0) return;
    //        var displacement;
    //        var n,lef;
    //        for(var iTem in tempGroup){
    //            switch(taxis){
    //                case 0:
    //                    displacement = (pos/-1.0 + maxisBase.x-maxisGroup.position.x);
    //
    //                    lef=displacement % m_speed;                        // 余数
    //                    n=parseInt(displacement / m_speed);                // 循环次数
    //                    for(var i=0;i<n;i++){
    //                        tempGroup[iTem].position.x=m_speed
    //                            +tempGroup[iTem].position.x;                // x轴移动到目的位置
    //                    }                                                   // 有余数就移动余数部分
    //                    if(lef >= 0) tempGroup[iTem].position.x=lef + tempGroup[iTem].position.x;
    //                    break;
    //                case 1:
    //                    tempGroup[iTem].position.z=(pos/-1.0 + maxisBase.z-maxisGroup.position.z)
    //                        +tempGroup[iTem].position.z; break;           // y轴移动到目的位置
    //                case 2:
    //                    tempGroup[iTem].position.y=(pos/1.0 + maxisBase.y-maxisGroup.position.y)
    //                        +tempGroup[iTem].position.y; break;           // z轴移动到目的位置
    //                default:break;
    //            }
    //        }
    //        switch(taxis){
    //            case 0:maxisGroup.position.x = pos/-1.0 + maxisBase.x; break; // 主轴x方向移动到目的位置
    //            case 1:maxisGroup.position.z = pos/-1.0 + maxisBase.z; break; // 主轴y方向移动到目的位置
    //            case 2:maxisGroup.position.y = pos/ 1.0 + maxisBase.y; break;  // 主轴z方向移动到目的位置
    //            default:break;
    //        }
    //

    function render(times) {

        //根据面板是否展开改变渲染器大小
        if($("#info_tip").css('display')=="block"){
            webglRenderWidth=window.innerWidth-$("#info_tip").width();
            webglRenderHeight=window.innerHeight;
        }
        else{
            webglRenderWidth=window.innerWidth;
            webglRenderHeight=window.innerHeight;
        }
        webGLRenderer.setSize(webglRenderWidth, webglRenderHeight);



        if (runStatus == true) {
            if (maxisGroup != undefined) {
                rotatyMaxisGroupPosition(maxiGroupRotateSpeed);
                maxisGroup.zoomSpeed = 1.2;
            }
            if (xaxismotion != undefined) {
                moveGroupPositionX(machineMotion[0]);                  // 移动x轴块
                moveGroupPositionY(machineMotion[1]);                  // 移动y轴块
                moveGroupPositionZ(machineMotion[2]);                  // 移动z轴块
            }
        }
        if (maxisGroup != undefined) infoShowChange();
        requestAnimationFrame(render);       //以合适的时间间隔执行render()方法，通常是60次每秒
        TWEEN.update(times);
        controls.update();
        webGLRenderer.render(scene, camera);


    }
    //渐变色
    function gradientColor(startColor, endColor, step) {
        startRGB = this.colorRgb(startColor);//转换为rgb数组模式
        startR = startRGB[0];
        startG = startRGB[1];
        startB = startRGB[2];

        endRGB = this.colorRgb(endColor);
        endR = endRGB[0];
        endG = endRGB[1];
        endB = endRGB[2];

        sR = (endR - startR) / step;//总差值
        sG = (endG - startG) / step;
        sB = (endB - startB) / step;

        var colorArr = [];
        for (var i = 0; i < step; i++) {
            //计算每一步的hex值
            var hex = this.colorHex('rgb('+ parseInt((sR * i + startR))+ ',' + parseInt((sG * i + startG))+ ',' + parseInt((sB * i + startB)) + ')');
            colorArr.push(hex);
        }
        return colorArr;
    }
    // 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
    gradientColor.prototype.colorRgb = function (sColor) {
        var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
        var sColor = sColor.toLowerCase();
        if (sColor && reg.test(sColor)) {
            if (sColor.length === 4) {
                var sColorNew = "#";
                for (var i = 1; i < 4; i += 1) {
                    sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
                }
                sColor = sColorNew;
            }
            //处理六位的颜色值
            var sColorChange = [];
            for (var i = 1; i < 7; i += 2) {
                sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
            }
            return sColorChange;
        } else {
            return sColor;
        }
    };
    // 将rgb表示方式转换为hex表示方式
    gradientColor.prototype.colorHex = function (rgb) {
        var _this = rgb;
        var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
        if (/^(rgb|RGB)/.test(_this)) {
            var aColor = _this.replace(/(?:(|)|rgb|RGB)*/g, "").split(",");
            var strHex = "#";
            for (var i = 0; i < aColor.length; i++) {
                var hex = Number(aColor[i]).toString(16);
                hex = hex < 10 ? 0 + '' + hex : hex;// 保证每个rgb的值为2位
                if (hex === "0") {
                    hex += hex;
                }
                strHex += hex;
            }
            if (strHex.length !== 7) {
                strHex = _this;
            }
            return strHex;
        } else if (reg.test(_this)) {
            var aNum = _this.replace(/#/, "").split("");
            if (aNum.length === 6) {
                return _this;
            } else if (aNum.length === 3) {
                var numHex = "#";
                for (var i = 0; i < aNum.length; i += 1) {
                    numHex += (aNum[i] + aNum[i]);
                }
                return numHex;
            }
        } else {
            return _this;
        }
    }

    //主轴循环变色，每两秒改变一次
    function changeColor(){
        length1=maxiscolorpoint.children.length;

        var gradient21 = new gradientColor('#00FF00', '#FFFF00', 2000);
        var gradient22 = new gradientColor('#FFFF00', '#FF0000', length1-6640);
        for(var i= 4640;i<length1;i++) {

            if(i<6640){
                maxiscolorpoint.children[i].children[0].material.color.set(gradient21[i-4640]);
            }
            else{
                maxiscolorpoint.children[i].children[0].material.color.set(gradient22[i-6640]);
            }
        }
        var timer1=setTimeout(function(){
            var gradient21 = new gradientColor('#00FF00', '#FFFF00', 3000);
            var gradient22 = new gradientColor('#FFFF00', '#FF0000', length1-7640);
            for(var i= 4640;i<length1;i++) {

                if(i<7640){
                    maxiscolorpoint.children[i].children[0].material.color.set(gradient21[i-4640]);
                }
                else{
                    maxiscolorpoint.children[i].children[0].material.color.set(gradient22[i-7640]);
                }
            }},2000);
        var timer2=setTimeout(function(){
            var gradient21 = new gradientColor('#00FF00', '#FFFF00', 1000);
            var gradient22 = new gradientColor('#FFFF00', '#FF0000', length1-5640);
            for(var i= 4640;i<length1;i++) {

                if(i<5640){
                    maxiscolorpoint.children[i].children[0].material.color.set(gradient21[i-4640]);
                }
                else{
                    maxiscolorpoint.children[i].children[0].material.color.set(gradient22[i-5640]);
                }
            }},4000);

    }


</script>

</body>
</html>